<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">

    <style>
        .wrap{
            width: 90%;
            margin: 0 auto;
        }
        #template{
            display: none;
        }
        #mask{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(156, 141, 141, 0.3);
			display: none;
		}
		#pop{
			padding:20px 50px;
			width:600px;
			background-color:#fff;
			border-radius:10px;
			transform:translate(-50%,-50%);
			position:fixed;
			top:50%;
			left:50%;
			display: none;
		}
		#pop h2{
			margin-bottom: 20px;
		}
        select{
            margin-top:8px;
            margin-left: 12px;
        }
    </style>
</head>
<body>    
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <h4>
            <span id="data-username"></span>
            <span id="data-type"></span>：您好
            <span id="relogin" style="cursor:pointer;color:red;">&nbsp;&nbsp;[退出登录]</span>
        </h4>
        <hr>
        <button class="btn btn-primary" style="float: right;" id="addStudent">+新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
	<div id="pop">
        <h2>添加学生</h2>

        <div class="form-horizontal">

            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
    
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>
    
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline" style="margin-left: 12px;">
                    <input type="radio" name="sex" checked id="data-male">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>
    
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>
                       
            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>
            
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary" style="display: inline-block;">确认添加</button>
                <button id="change" class="btn btn-primary" style="display: none;">确认更改</button>
                <button id="cancel" class="btn btn-default">取消</button>
               
            </div>
        </div>
    
    </div>
    
    <script src="lib/jquery.min.js"></script>
    <script src="lib/citys.js"></script>
    <script src="lib/datepicker/wdatepicker.js"></script>
    <script src="common.js"></script>  
    
    <script>
        // 开始进入页面之前出现登录页面，登陆验证(浏览器先查session，session里面没有再查cookie,cookie拿到的是一个字符串)
        let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo=","");
        if(!userInfo){
            location.href = `${address}/login.html`
        }
        // console.log(userInfo);//第二次进入studentList页面，直接从浏览器打开，不登录。session被清掉了 从cookie里拿到 userInfo=[{"id":1,...}]
        // console.log(JSON.parse(userInfo)[0].username);//如果点击了30天免登录，从session里面拿到的
        
        // 展示用户信息及退出登录
        $("#data-username").html(JSON.parse(userInfo)[0].name);
        $("#data-type").html(JSON.parse(userInfo)[0].usertype? "同学": "老师");
        // 点击退出登录后，session和cookie都清空，且返回登录页面
        $("#relogin").click(function(){
            sessionStorage.removeItem("userInfo");
            document.cookie = "userInfo=xxx;expires=" + new Date("1970-01-01");
            location.href = `${address}/login.html`
        })


        // let address = "http://10.35.170.150:8081"
        let template = $("#template");

        // 删除
        template.find(".data-delete").click(function(){
			let nowItem = $(this).closest("tr");
			if(confirm(`确定要删除${nowItem.find(".data-name").html()}同学吗？此项操作不可逆！`)){

				$.ajax({
					url:`${address}/deleteStudent`,
					data:{
						id:$(this).closest("tr").find(".data-id").html()
					},
					success(data){
						if(data === "success"){
                            // alert("删除成功")
                            // console.log(this);
                            nowItem.fadeOut();
						}
						else{
							alert("删除失败");
						}
					}
				})

			}
        })
        
        // 选择入学日期
        $("#data-joinDate").click(function(){
			WdatePicker();
        })
        
        
        // 添加请求
        $("#submit").click(function(){
           
            if($("#data-name").val() && $("#data-age").val() && $("#data-joinData")){
                $.ajax({
					url:`${address}/addStudent`,
					data:{
						name:$("#data-name").val(),
						age:$("#data-age").val(),
						sex:$("#data-female")[0].checked ? 0 : 1,
						city:$("#province").val() + $("#city").val() + $("#area").val(),
						joinDate:$("#data-joinDate").val(),
					},
					success(data){
						if(data === "success"){
							history.go(0)
						}
						else{
							alert("操作失败")
						}
					}
				})
            }
        })


        // 编辑功能
        template.find(".data-edit").click(function(){
            $("#mask").fadeIn();
			$("#pop").fadeIn();
            $("#data-name").focus();
            // $("#submit").html("确认更改");
            $("#pop").find("h2").html("编辑学生");
            $("#submit").css("display","none");
            $("#change").css("display","inline-block");

            let editItem = $(this).closest("tr");
            $("#data-name").val(editItem.find(".data-name").html());
            $("#data-age").val(editItem.find(".data-age").html());
            $("#data-joinDate").val(editItem.find(".data-joinDate").html());
            // 让要编辑的某行城市显示 有问题？？？
            // $("#data-city").val(editItem.find("#province").val() + editItem.find("#city").val()+ editItem.find("#area").val());
            // console.log( $("#data-city"));
            // console.log(editItem.find(".data-name").html());

            // 性别勾选
            if(editItem.find(".data-sex").html() === "女"){
                 $("#data-female").prop("checked",true);
            }
            if(editItem.find(".data-sex").html() === "男"){
                 $("#data-male").prop("checked",true);
            }

            $("#change").click(function(){
        
                if($("#data-name").val() && $("#data-age").val() && $("#data-joinData")){
                    $.ajax({
                        url:`${address}/updateStudent`,
                        data:{
                            id:editItem.find(".data-id").html(),
                            name:$("#data-name").val(),
                            age:$("#data-age").val(),
                            sex:$("#data-female")[0].checked ? 0 : 1,
                            city:$("#province").val() + $("#city").val() + $("#area").val(),
                            joinDate:$("#data-joinDate").val()
                        },
                        success(data){
                            if(data === "success"){
                                history.go(0)
                            }
                            else{
                                alert("更改失败") //为什么不弹出？？
                            }
                        }

                    })
                }

            })
        })


        // 添加功能弹出层
        $("#addStudent").click(function(){
            $("#pop").find("h2").html("添加学生");
			$("#mask").fadeIn();
			$("#pop").fadeIn();
			$("#data-name").focus()
		})
		$("#cancel").click(function(){
			$("#mask").fadeOut("fast");
			$("#pop").fadeOut("fast");
        })

        
        window.onkeydown = function(event){
			if(event.keyCode === 13){
				$("#submit").click()
			}
			if(event.keyCode === 27){
				$("#cancel").click()
			}
		}


        $.ajax({
            url:`${address}/getstudentList `,
            success(data){
				let studentList = JSON.parse(data);
				let tbody = $(".data-wrap");
				studentList.forEach(item=>{
					let newItem = template.clone(true).attr("id","");
					newItem.find(".data-id").html(item.id)
					newItem.find(".data-name").html(item.name)
					newItem.find(".data-age").html(item.age)
					newItem.find(".data-sex").html(item.sex ? "男" : "女")
					newItem.find(".data-city").html(item.city)
					newItem.find(".data-joinDate").html(item.joinDate)
					newItem.appendTo(tbody)
				})
			}
        })
    </script>
</body>
</html>